<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>login</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css"
        href="css/style.css"/>
</head>

<body>
<div id="wrap">
  <div id="top_content">
    <div id="header">
      <div id="rightheader">
        <p>
          2020/11/10
          <br/>
        </p>
      </div>
      <div id="topheader">
        <h1 id="title">
          <a href="#">风尚Report登录平台测试环境</a>
        </h1>
      </div>
      <div id="navigation">
      </div>
    </div>
    <div id="content">
      <p id="whereami">
      </p>
      <h1>
        login
      </h1>
      <form action="emplist.html" method="post">
        <table cellpadding="0" cellspacing="0" border="0"
               class="form_table">
          <tr>
            <td valign="middle" align="right">
              username:
            </td>
            <td valign="middle" align="left">
              <input type="text" class="inputgri" v-model="user.username" name="name"/>
            </td>
          </tr>
          <tr>
            <td valign="middle" align="right">
              password:
            </td>
            <td valign="middle" align="left">
              <input type="password" class="inputgri" v-model="user.password" name="pwd"/>
            </td>
          </tr>
        </table>
        <p>
          <input type="button" @click="login" class="button" value="Submit &raquo;"/>
          &nbsp;&nbsp;
          <a href="/ems_vue/regist.html">注册</a>
        </p>
      </form>
    </div>
  </div>
  <div id="footer">
    <div id="footer_bg">
      ABC@126.com
    </div>
  </div>
</div>
</body>
</html>
<script src="/ems_vue/js/vue.js"></script>
<script src="/ems_vue/js/axios.min.js"></script>
<script>
  var app = new Vue({
    el: "#wrap",
    data: {
      user: {},//用来保存用户数据
    },
    methods: {
      //用户登录
      login() {
        //发送登录请求
        axios.post("http://localhost:8080/ems_vue/user/login", this.user).then(res => {
          console.log(res.data);
          if (res.data.state) {
            alert(res.data.msg + ",点击确定进入主页!");
            //将登录用户信息放入localStorage key  value
            localStorage.setItem("user", JSON.stringify(res.data.user));
            location.href="/ems_vue/emplist.html";
          } else {
            alert(res.data.msg);
          }
        });
      }
    }
  });
</script>